qx.Class.define("lastfmbackup.view.Layout", {
  
  extend    : qx.core.Object,
  implement : lastfmbackup.view.IElement,

  properties : {
    
    statusTable : {
      check    : "lastfmbackup.view.IElement",
      nullable : true,
      apply    : "_applyStatusTable"
    },
    
    progressBar : {
      check    : "lastfmbackup.view.IElement",
      nullable : true,
      apply    : "_applyProgressBar"
    },
    
    progressButtons : {
      check    : "lastfmbackup.view.IElement",
      nullable : true,
      apply    : "_applyProgressButtons"
    }
    
  },
  
  construct : function()
  {
    this.base(arguments);
    
    this._element = q.create(this._getTemplate());
  },
  
  members : {
    
    _element : null,
    
    
    getElement : function()
    {
      return this._element;
    },
    
    _getTemplate : function()
    {
      return [
        "<div id='lastfmbackup'>",
          "<div class='left'>",
            "<div/>",
            "<div/>",
          "</div>",
          "<div class='right'></div>",
          "<div class='clear'></div>",
        "</div>"
      ].join("");
    },
    
    _applyStatusTable : function(value)
    {
      this._element.find(".right").append(value.getElement());
    },
    
    _applyProgressBar : function(value)
    {
      this._element.find(".left > div").eq(0).append(value.getElement());
    },
    
    _applyProgressButtons : function(value)
    {
      this._element.find(".left > div").eq(1).append(value.getElement());
    }
    
  }
  
});